<route>
    {
        meta: {
            layout: 'index',
            title:'部门管理'
        }
    }  
</route>
<template>
    <div class="app-container">
        <el-form :inline="true">
            <el-form-item label="">
                <el-input v-model="deptName" placeholder="请输入部门名称" clearable :prefix-icon="Search" />
            </el-form-item>
            <el-form-item>
                <el-button :icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain :icon="Plus" size="mini" @click="handleAdd"
                    v-hasPermi="[AUTH.DEPT_CREATE]">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="info" plain :icon="Sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
            </el-col>
            <right-toolbar @queryTable="handleQuery"></right-toolbar>
        </el-row>

        <el-table v-if="refreshTable" v-loading="loading" :data="deptTree" row-key="id" :default-expand-all="isExpandAll"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
            <el-table-column prop="deptSort" label="排序" width="200"></el-table-column>
            <el-table-column prop="leader" label="负责人" width="200"></el-table-column>
            <el-table-column prop="mobile" label="联系方式" width="200"></el-table-column>
            <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button size="mini" type="text" :icon="Edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="[AUTH.DEPT_UPDATE]">修改</el-button>
                    <el-button size="mini" type="text" :icon="Plus" @click="handleAdd(scope.row)"
                        v-hasPermi="[AUTH.DEPT_CREATE]">新增</el-button>
                    <el-button v-if="scope.row.parentId != 0" size="mini" type="text" :icon="Delete"
                        @click="handleDelete(scope.row)" v-hasPermi="[AUTH.DEPT_DELETE]">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加或修改部门对话框 -->
        <!-- <el-dialog :title="title" v-model="open" width="600px" append-to-body>
            <el-form :model="form" label-width="80px">
                <el-row>
                    <el-col :span="24" v-if="form.parentId != 0">
                        <el-form-item label="上级部门" prop="parentName">
                            <tree-select v-model:value="form.parentId" :data="deptStore.deptTree" :objMap="{
                                value: 'id',
                                label: 'deptName',
                                children: 'children',
                            }" placeholder="选择上级部门" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="部门名称" prop="deptName">
                            <el-input v-model="form.deptName" placeholder="请输入部门名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="显示排序" prop="deptSort">
                            <el-input-number v-model="form.deptSort" controls-position="right" :min="0" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="负责人" prop="leader">
                            <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="mobile">
                            <el-input v-model="form.mobile" placeholder="请输入联系电话" maxlength="11" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog> -->
        
        <!-- 新版添加或修改部门对话框 -->
        <AntdConfirmModal :title="isCreate ? '添加部门' : '修改部门'" ref="modalRef" width="600px" :keepSlot="false"
            @confirm="submitForm">
            <a-form :model="form" name="basic" :label-col="{ span: 8 }">
                <a-row>
                    <a-col :span="12" v-if="form.parentId != 0">
                        <a-form-item label="上级部门" name="parentId" :rules="[{ required: true, message: '请选择上级部门' }]">
                            <a-tree-select v-model:value="form.parentId" allow-clear :tree-data="deptStore.deptTree"
                                :field-names="{
                                    value: 'id',
                                    label: 'deptName',
                                    children: 'children',
                                }" placeholder="选择上级部门" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="部门名称" name="deptName" :rules="[{ required: true, message: '请输入部门名称' }]">
                            <a-input v-model:value="form.deptName" placeholder="请输入部门名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="显示排序" name="deptSort">
                            <a-input v-model:value="form.deptSort" controls-position="right" :min="0" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="负责人" name="leader" :rules="[{ required: true, message: '请输入负责人' }]">
                            <a-input v-model:value="form.leader" placeholder="请输入负责人" maxlength="20" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="手机号码" name="mobile" :rules="[{ required: true, message: '请输入手机号码' }]">
                            <a-input v-model:value="form.mobile" placeholder="请输入手机号码" maxlength="11" />
                        </a-form-item></a-col><a-col :span="12">
                        <a-form-item label="邮箱" name="email" :rules="[{ required: true, message: '请输入邮箱' }]">
                            <a-input v-model:value="form.email" placeholder="请输入邮箱" maxlength="50" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </AntdConfirmModal>
    </div>
</template>
  
<script setup>
import { Delete, Edit, Plus, Sort, Refresh, Search } from '@element-plus/icons-vue'
import Validator from '@/utils/Validator'
import { queryOne, deleteOne, createOne, updateOne } from "../../api/dept";
import useDeptStore from '../../store/dept';
const deptStore = useDeptStore()
import useApp from "@/hooks";
const { $, proxy } = useApp();
import moduleApp from '../../app';
const AUTH = ref(moduleApp.AUTH)
const open = ref(false);
const isCreate = ref(true)
const loading = ref(true);
const title = ref("");
const isExpandAll = ref(false);
const refreshTable = ref(true);
const deptName = ref('')
const deptTree = ref([])
const data = reactive({
    form: {}
});
const modalRef = ref(null)
const { form } = toRefs(data);

// 监听数据变化
watch(() => deptName.value, (newVal, oldVal) => {
    const t = $.freeStore(deptStore.deptTree)
    if (Validator.isEmpty(newVal)) {
        deptTree.value = t
        isExpandAll.value = false
    }
    else {
        deptTree.value = $.treeFilter(t, newVal)
        isExpandAll.value = true
    }

})
// 重置
function resetQuery() {
    deptName.value = ''
}
/** 查询部门列表 */
function getList() {
    loading.value = true;
    deptStore.freshTree().then(response => {
        deptTree.value = $.freeStore(response)
        loading.value = false;
    })
}
/** 取消按钮 */
function cancel() {
    open.value = false;
    reset();
}
/** 表单重置 */
function reset() {

    form.value = {
        id: undefined,
        parentId: undefined,
        deptName: undefined,
        deptSort: 0,
        leader: undefined,
        mobile: undefined,
        email: undefined,
        status: '1'
    };

}
/** 搜索按钮操作 */
function handleQuery() {
    getList();
}

/** 新增按钮操作 */
async function handleAdd(row) {
    reset();
    if (row.id != undefined) {
        form.value.parentId = row.id;
    }
    isCreate.value = true;
    modalRef.value.openModal()
}
/** 展开/折叠操作 */
function toggleExpandAll() {
    refreshTable.value = false;
    isExpandAll.value = !isExpandAll.value;
    nextTick(() => {
        refreshTable.value = true;
    });
}
/** 修改按钮操作 */
async function handleUpdate(row) {
    reset();
    form.value = $.freeStore(row)
    if (row.parentId != 0) {
        queryOne(row.parentId).then((response) => {
            form.value.parentName = response.deptName
        });
    }
    isCreate.value = false;
    modalRef.value.openModal()
}
/** 提交按钮 */
function submitForm() {
    if (form.value.id != undefined) {
        updateOne(form.value).then((response) => {
            $.$modal.msgSuccess("修改成功");
            open.value = false;
            getList();
            modalRef.value.closeModal()
        });
    } else {
        createOne(form.value).then((response) => {
            $.$modal.msgSuccess("新增成功");
            open.value = false;
            getList();
            modalRef.value.closeModal()
        });
    }
}
/** 删除按钮操作 */
function handleDelete(row) {
    $.$modal
        .confirm('是否确认删除名称为"' + row.deptName + '"的数据项?')
        .then(function () {
            return deleteOne(row.id);
        })
        .then(() => {
            getList();
            $.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
}

getList();
</script>
  